<template>
  <div v-loading="loading" class="dashboard-container">
    <el-card class="box-card">
      <TreeTool :tree-node="companyInfo" :is-root="true" @addDept="addDept" />
    </el-card>
    <el-tree
      :props="defaultProps"
      :data="departs"
      :default-expand-all="true"
      icon-class="el-icon-circle-plus"
    >
      <template v-slot="{node, data}">
        <TreeTool :tree-node="data" :node="node" @editDept="editDept" @addDept="addDept" @getDeparts="getDeparts" />
      </template>
    </el-tree>

    <AddDept ref="addDept" :tree-node="treeNode" :show-dialog.sync="showDialog" @getDept="getDeparts" />
  </div>
</template>

<script>
import TreeTool from '@/views/departments/components/TreeTool'
import { getDepartments } from '@/api/user'
import { tranListToTreeData } from '@/utils'
import AddDept from '@/views/departments/components/add-dept'

export default {
  components: {
    TreeTool,
    AddDept
  },
  data() {
    return {
      showDialog: false,
      companyInfo: {},
      defaultProps: {
        label: 'name'
      },
      departs: [],
      treeNode: {},
      loading: false
    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    editDept(node) {
      this.showDialog = true
      this.treeNode = node
      //  请求接口
      this.$refs.addDept.getDetail(node.id)
    },
    addDept(node) {
      this.showDialog = true
      this.treeNode = node
    },
    async getDeparts() {
      this.loading = true
      const { depts, companyName } = await getDepartments()
      this.companyInfo = { name: companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(depts, '')
      this.loading = false
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  width: 900px;
  margin: 50px auto;
}

.box-card {
  background: #99CCFF;
  color: #003366;
}

.text {
  color: #003366;
}

.drop {
  cursor: pointer;
  user-select: none;
}

</style>
